<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        这是div内的文本
        <p>
            这是p内的文本
            <a href="http://www.baidu.com">百度</a>
        </p>
    </div>
</body>
<script>
    //事件流：事件执行
    //事件模型:
    //1、事件的捕捉 找到事件发生的源头
    //2、事件的的执行 在事件源上执行事件的回调函数
    //3、事件的冒泡 子元素事件会向父级元素传递

    //false是冒泡阶段
    //ture是捕获阶段
    let div = document.querySelector("#app")
    let p = document.querySelector("#app>p")
    let a = document.querySelector("#app>p>a")
    console.log(div, p, a)
    div.addEventListener("click", function () {
        alert("div被点击了")
    }, false)
    p.addEventListener("click", function () {
        alert("p被点击了")
    }, false)
    a.addEventListener("click", function (e) {
        console.log("a被点击了")
        let eventObject = e || event
        //阻止默认事件的执行
        e.preventDefault()
        console.log(eventObject)
        //阻止事件冒泡
        if (e.stopPropagation) {
            e.stopPropagation()
        } else {
            //IE执行的阻止事件冒泡
            e.cancelBubble()
        }
    }, true)
</script>

</html>